{% extends 'base.html' %}
{% block title %}
    <title>资源创建</title>
{% endblock %}
{% block customcss %}
    <style>
    .status-this{border:1px solid #2F4056;border-radius: 4px;background-color: #2F4056;color: #fff!important;}
    .create-resource-btn{float: right}
    .model-box{display: none}
    .ziyuan-table-list{    padding: 9px;}
    .dir-search{    /*box-shadow: 0px 0px 5px black;*/height: 600px;padding-top: 0px!important;}
    .resource_ma`nage{background-color: #fff;    height: 600px;}
    .layui-card-header-this{border-bottom: 4px solid #5FB878;}
    .td_hide{white-space: nowrap;text-overflow: ellipsis;overflow: hidden;}
    .tabs-ul{height:40px}
    .layui-container {width: 1344px!important;}
    #tabs-header-dir{}
    </style>
    <link rel="stylesheet" href="/static/ztree/css/bootstrapStyle/bootstrapStyle.css" type="text/css">
    <link rel="stylesheet" href="/static/css/spop.min.css" type="text/css">
{% endblock %}
{% block content %}
  <div class="layui-row layui-col-space30">
    <div class="layui-col-md2 dir-search" >
        <div class="layui-card">
            <ul class="tabs-ul">
                <li>
                    <div class="layui-card-header layui-card-header-this" onclick="tabsSwitch('tree-dir-id');" id="tabs-header-dir" style="float: left">按目录</div>
                </li>
                <li>
                    <div class="layui-card-header " onclick="tabsSwitch('tree-jigou-id');" id="tabs-header-jiegou" style="    float: right;">按数据源</div>
                </li>
            </ul>
          <div class="layui-card-body" style="display: block" id="tree-dir-id">
            <ul id="treeDemo" class="ztree"></ul>
          </div>
          <div class="layui-card-body" style="display: none" id="tree-jigou-id">
            <ul id="treeDemo1" class="ztree"></ul>
          </div>
        </div>

    </div>
    <div class="layui-col-md10 resource_manage" >
        <div class="layui-row">
            <div class="layui-col-md6">
                <span>状态：</span>
                <span class="layui-breadcrumb" lay-separator="|">
                  <a href="#" class="status-this"  values="0" onclick="filter_resource_type(this);">全部</a>
                  <a href="#" values="1" onclick="filter_resource_type(this);" >公开</a>
                  <a href="#" values="2" onclick="filter_resource_type(this);">授权</a>
                </span>
            </div><br><br>
            <div class="layui-col-md6">

            </div>
        </div>
      <div class="grid-demo">
        <div class="demoTablet" id="searchtable">
          搜索表名：
          <div class="layui-inline">
            <input class="layui-input" name="id" id="demoReload" autocomplete="off">
          </div>
          <button class="layui-btn" data-type="reload">搜索</button>
          <button  class="layui-btn layui-btn-normal create-resource-btn" >创建</button>
        </div>
        <table class="layui-table" lay-data="{ height:500, url:'/resource/list/', page:true, id:'idTest'}" lay-filter="demo" id="idsssss">
          <thead>
            <tr>
              <th lay-data="{field:'id', width:'6%', fixed: true}">id</th>
              <th lay-data="{field:'name', width:'9%'}">表名称</th>
              <th lay-data="{field:'resource_name', width:'15%'}">资源名称</th>
              <th lay-data="{field:'db_name', width:'10%'}">数据来源</th>
              <th lay-data="{field:'r_status', width:'7%'}">公开状态</th>
              <th lay-data="{field:'rtype', width:'10%'}">资源目录</th>
              <th lay-data="{field:'addtimes', width:'15%'}">创建时间</th>
              <th lay-data="{field:'updatetime', width:'15%'}">修改时间</th>
              <th lay-data="{fixed: 'right', width:'14%', align:'center', toolbar: '#barDemo'}">操作</th>
            </tr>

          </thead>
        </table>
        <script type="text/html" id="barDemo">
{#          <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">策略</a>#}
          <a class="layui-btn layui-btn-xs" lay-event="edit"><i class="layui-icon layui-icon-edit"></i></a>
          <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"><i class="layui-icon layui-icon-delete"></i></a>
        </script>

      </div>
    </div>
  </div>
    <!--数据库表描述模态框-->
    <div class="model-box" id="model-box">
            <div class="layui-row" style="    margin-top: 10px">
                <form class="layui-form" action="" onsubmit="return false">
                    <div style="height: 400px">
                        <div class="layui-col-md6">

                            <div class="layui-col-md12">
                              <div class="layui-form-item" style="padding-top: 2px;">
                                <label class="layui-form-label">1、数据源:</label>
                                <div class="layui-input-block" style="    width: 210px;">
                                {% if not datasourcelist %}

                                    <select name="interest" lay-filter="selectDataSource" id="datasource" disabled>
                                    </select>
                                    <label><span class="layui-badge-dot"></span>暂无数据源，现在去<a href="/data_source/" target="_blank"><span class="layui-badge layui-bg-blue">添加</span></a></label>
                                {% else %}
                                    <select name="interest" lay-filter="selectDataSource" id="datasource">
                                        <option value="">请选择数据源</option>
                                          {% for i in datasourcelist %}
                                              <option value="{{ i.id }}">{{ i.source_name }}</option>
                                          {% endfor %}
                                    </select>
                                  {% endif %}

                                </div>
                              </div>
                                <div class="layui-form-item">
                                    <div class="ziyuan-table-list">
{#                                        <div class="demoTablet" id="searchtable" style="padding-left: 29px;">#}
{#                                          搜索表名：#}
{#                                          <div class="layui-inline">#}
{#                                            <input class="layui-input" name="id" id="demoReload" autocomplete="off">#}
{#                                          </div>#}
{#                                          <button class="layui-btn  layui-btn-sm" data-type="reload" >搜索</button>#}
{#                                        </div>#}
                                            <table class="layui-table" lay-filter="addEvent" id="tableselectdesc" lay-size="sm">
                                            </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="layui-col-md6">
                        <div class="layui-col-md12">
                            <div class="ziyuan-table-list" >
                                <span>已选取资源</span>
                                <table class="layui-table" lay-size="sm" style="table-layout: fixed" id="selected_before">
                                  <colgroup>
                                            <col width="40%">
                                            <col width="40%">
                                            <col width="20%">
                                  </colgroup>
                                  <thead>
                                    <tr>
                                              <th>表名称</th>
                                              <th>表描述</th>
                                              <th>操作</th>
                                    </tr>
                                  </thead>
                                  <tbody>

                                  </tbody>
                                </table>
                            </div>

                        </div>
                    </div>
                    </div>



                    <div class="layui-col-md12">
                          <div class="layui-form-item">
                            <div class="layui-input-block">
                              <button class="layui-btn" lay-submit="" lay-filter="formone">完成</button>
                            </div>
                          </div>
                    </div>
               </form>
            </div>

    </div>
    <!--创建资源模态框 **创建资源模态框-->
    <div id="edit-resource-btn-target" style="display: none">
            <div class="layui-row" style="padding: 10px">
                <span id="insertResourceId" style="display: none"></span>
                <form class="layui-form" action="" onsubmit="return false">
                    <div class="layui-col-md12">
                          <div class="layui-form-item">
                            <div class="layui-inline">
                              <label class="layui-form-label">资源名称</label>
                              <div class="layui-input-inline">
                                <input type="tel" name="resource_name" id="resource_name"  autocomplete="off" class="layui-input" lay-verify="name">
                              </div>
                            </div>
                          </div>
                          <div class="layui-form-item">
                            <label class="layui-form-label">目录分类</label>
                            <div class="layui-input-inline">
                              <select name="selectdirOne" id="selectdirOne" lay-filter="selectdirOne">
                              </select>
                            </div>
                            <div class="layui-input-inline">
                              <select name="selectdirTwo" id="selectdirTwo" lay-filter="selectdirTwo">
                                <option value="">请选择二级目录</option>
                              </select>
                            </div>
                            <div class="layui-input-inline">
                              <select name="selectdirThree" id="selectdirThree" >
                                <option value="">请选择三级目录</option>
                              </select>
                            </div>
                          </div>
                          <div class="layui-form-item">
                            <label class="layui-form-label">资源描述</label>
                            <div class="layui-input-block">
                              <input type="text" name="resource_desc"  id="resource_desc" lay-verify="desc" placeholder="请输入资源简单描述信息" autocomplete="off" class="layui-input">
                                <span id="edittablename" style="display: none"></span>
                                <span id="checkdbId" style="display: none"></span>
                            </div>
                          </div>
                          <div class="layui-form-item"><!--表的字段描述信息表-->
                                <table class="layui-hide" id="display_resource_info" style="width: 100%" lay-filter="editdesc"></table>
                          </div>
                          <div class="layui-form-item layui-form-text">
                            <label class="layui-form-label">资源说明</label>
                            <div class="layui-input-block">
                              <textarea placeholder="请输入资源的详细描述信息" class="layui-textarea" name="resource_content" id="resource_content"></textarea>
                            </div>
                          </div>
                          <div class="layui-form-item">
                            <label class="layui-form-label">资源性质</label>
                            <div class="layui-input-block">
                              <input type="radio" name="resource_status" value="0" title="需授权" checked id="resource_status" >
                              <input type="radio" name="resource_status" value="1" title="公开" id="resource_status">
                            </div>
                          </div>
                          <div class="layui-form-item">
                            <label class="layui-form-label">失效时间</label>
                            <div class="layui-input-block">
                              <input type="text" name="expire_date" id="expire_date" lay-verify="date" placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input" >
                            </div>
                          </div>
                          <div class="layui-form-item">
                            <label class="layui-form-label">黑名单</label>
                            <div class="layui-input-block">
                              <input type="text" name="blackbook" id="blackbook" autocomplete="off" placeholder="请输入要屏蔽的IP地址，多个ip则以英文逗号分割" class="layui-input">
                            </div>
                          </div>
                    </div>
                    <div class="layui-col-md12">
                          <div class="layui-form-item">
                            <div class="layui-input-block">
                              <button class="layui-btn" lay-submit="" lay-filter="formtwo">保存并发布</button>
                            </div>
                          </div>
                    </div>
               </form>
            </div>
    </div>
     <div id="add_chelue_model" style="display: none">
        <form  class="layui-form" action="">
              <div class="layui-form-item">
                <label class="layui-form-label">失效时间</label>
                <div class="layui-input-block">
                  <input type="text" name="title" lay-verify="title" autocomplete="off" placeholder="请输入标题" class="layui-input">
                </div>
              </div>
              <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">添加黑名单</label>
                <div class="layui-input-block">
                  <textarea placeholder="请输入内容" class="layui-textarea"></textarea>
                </div>
              </div>
        </form>
    </div>
{% endblock %}

{% block customjs %}
{#    <script type="text/javascript" src="/static/ztree/js/jquery-1.12.4.min.js"></script>#}
    <script type="text/javascript" src="/static/ztree/js/jquery.ztree.core.js"></script>
    <script type="text/javascript" src="/static/mymod/spop.js"></script>
<script>
//展示数据源（表格）
function desplay_resource(em){
    var parentelem=$(em).parent().parent().find('td');
    var  edittablename=parentelem.eq(0).text();
    var checkdbId=$("#datasource").val();
    $("#edittablename").val(edittablename);
    $("#checkdbId").val(checkdbId);
    layui.use(['table'], function(){
      var table = layui.table;
      table.render({
        elem: '#display_resource_info'
        ,url:'/resource/gettableinfo/'+edittablename+'/'+checkdbId
        ,cols: [[
          {type:'checkbox'}
          ,{field:'columns', width:100, title: '字段名'}
          ,{field:'columntype', width:100, title: '类型'}
          ,{field:'desc', width:300, title: '原字段描述'}
          ,{field:'editdesc', width:300, title: '备注<span style="color:#FF5722">(可直接编辑)</span>',edit: 'text'}
        ]]
        ,skin: 'row', even: true,limit: 15
      });
    });

    layer_index_two = layer.open({
      title:"编辑资源内容",
      type: 1,
      shade:false,
      skin: 'layui-layer-rim', //加上边框
      area: ['850px', '550px'], //宽高
      content: $("#edit-resource-btn-target"),
    });
}
//删除数据源（表格）
function delete_resource (em) {
    var parentelem=$(em).parent().parent().find('td');
    var tablename=parentelem.eq(0).text();
    var tabledesc=parentelem.eq(1).text();
    layui.use(['table'], function(){

        var table = layui.table;
        var table1=table.cache.tableselectdesc;
        datas1=[];
        for(var g=0;g<table1.length;g++){
            datas1.push(table1[g])
        }
        datas1.push({
            tableName:tablename,
            tableComment:tabledesc,
            operate:'"<button class="layui-btn layui-btn-xs" ><i class="layui-icon layui-icon-add-circle"></i></button>"'
        });
        table.reload("tableselectdesc",{
            data:datas1
        })
    });
    $(em).parents('tr').remove();

};
layui.use(['form', 'table','laydate'], function(){
  var table = layui.table,laydate = layui.laydate;
  form = layui.form;
  form.render();
  $=layui.$;
  //监听表格复选框选择
  table.on('checkbox(editdesc)', function(obj){
    console.log(obj)
  });
 //日期
  laydate.render({
    elem: '#expire_date'
  });
  //自定义验证规则
  form.verify({
    name: function(value){
      if(value.length < 3){
        return '请输入资源名称';
      }
    }
    ,desc: function(value){
      if(value.length < 3){
        return '请输入资源描述信息';
      }
    }
  });

  //监听工具条
  table.on('tool(demo)', function(obj){
    var data = obj.data;
    if(obj.event === 'detail'){
      layer.msg('ID：'+ data.id + ' 的查看操作');
        layer.open({
          title:"编辑策略",
          type: 1,
          skin: 'layui-layer-rim', //加上边框
          area: ['850px', '550px'], //宽高
          content: $("#add_chelue_model"),
        });
    } else if(obj.event === 'del'){
      layer.confirm('真的删除行?',{btn: ['确定', '取消'],},function (index,layero) {
            var jsondata={"resource_id":data.id};
            $.ajax({
                url:"/resource/list/",
                type:"DELETE",
                data:jsondata,
                dataType:'json',
                success:function (data) {
                    if(data.code==0){
                        spop({
                            template: '<h4 class="spop-title">成功</h4>删除成功！！',
                            autoclose: 3000,style:"success"
                        });
                        setTimeout(function () {window.location.reload()},2000)
                    }else{
                        spop({
                            template: '<h4 class="spop-title">成功</h4>删除错误！！',
                            autoclose: 3000,style:"error"
                        });
                    }
                }

            })
             layer.close(index);
          },function (index) {//cancel
            layer.close(index);
          }
      );
    }
    else if(obj.event === 'edit'){
        var resourceid=data.id;
        $("#insertResourceId").val(resourceid);
        $.getJSON("/resource/info/"+resourceid,function (data) {
                if(data.code==0){
                    console.log(data.cateid.one,data.cateid.two,data.cateid.three);
                    // 为更新表字段做埋点
                    $("#edittablename").val(data.tableanddb.table);
                    $("#checkdbId").val(data.tableanddb.db);
                    // 为更新表字段做埋点 end
                    $("#resource_name").val(data.detail.resource_name);
                    //$("#selectdir").val(data.detail.resource_cate);
                    $("#selectdirOne").val(data.cateid.one);
                    $("#selectdirTwo").val(data.cateid.two);
                    {#$("#selectdirThree").val(data.cateid.three);#}
                    $("#selectdirThree").append('<option value="'+data.cateid.three+'" selected>'+data.cateid.threename+'</option>')
                    $("#selectdirTwo").val(data.cateid.two);
                    $("#resource_desc").val(data.detail.resource_desc);
                    $("#resource_content").val(data.detail.resource_content);
                    $("#blackbook").val(data.detail.blackbook);
                    $("#expire_date").val(data.detail.expiretime);

                    $('[name=resource_status]').each(function(i,item){
                        if($(item).val()==data.detail.resource_status){
                            $(item).prop('checked',true);

                        }else {
                            $(item).attr('checked',true);
                        }
                        form.render();
                    });

                    form.render('select');
                    table.render({
                    elem: '#display_resource_info'
                    ,url:'/resource/info/'+resourceid
                    ,cols: [[
                      {type:'checkbox',LAY_CHECKED: true}
                      ,{field:'columns', width:150, title: '字段名'}
                      ,{field:'columntype', width:150, title: '类型'}
                      ,{field:'desc', width:330, title: '原字段描述'}
                      ,{field:'editdesc', width:300, title: '备注<span style="color:#FF5722">(可直接编辑)</span>',edit: 'text'}
                    ]]
                    ,page: true,limit: 15
                  });
                }
        });
        layer.open({
          title:"编辑资源内容",
          type: 1,
          skin: 'layui-layer-rim', //加上边框
          area: ['850px', '550px'], //宽高
          content: $("#edit-resource-btn-target"),
        });
    }
  });
  //监听提交
  form.on('submit(formone)', function(data){
      layer.close(layer_index_one);
    return false;
  });
  //监听提交
  form.on('submit(formtwo)', function(data){
      console.log(data.field)
       var checkStatus = table.checkStatus('display_resource_info')
          ,tabledata = checkStatus.data;
      if(!data.field.selectdirThree){
          layer.msg("必须要选择到三级目录，如果没有，去创建")
          return
      }
      if(data.field.selectdirThree){
          var selectdir=data.field.selectdirThree
      }else if(!data.field.selectdirThree&&data.field.selectdirTwo){
          var selectdir=data.field.selectdirTwo
      }else{
          layer.msg("请选择到三级目录");
          return
      }
       var jsondata={
              "resource_info":JSON.stringify(tabledata),
              "resource_name":data.field.resource_name,
              "resource_dir":selectdir,
              "resource_desc":data.field.resource_desc,
              "resource_content":data.field.resource_content,
              "resource_status":data.field.resource_status,
              "db_id":$("#datasource").val(),
              "insertResourceId":$("#insertResourceId").val(),
              "tablename":$("#edittablename").val(),
              "expiretime":data.field.expire_date,
              "blackbook":data.field.blackbook
          };
      console.log(tabledata)
      {#debugger#}
        $.ajax({
            url:"/resource/list/",
            type:"post",
            dataType:"json",
            contentType:"application/json;charset=utf-8",
            data:JSON.stringify(jsondata),
            success:function (data) {
                if(data.code==0){
                        spop({
                            template: '<h4 class="spop-title">成功</h4>资源添加成功！',
                            autoclose: 3000,style:"success"
                        });
                        setTimeout(function () {window.location.reload()},2000)
                }else{
                        spop({
                            template: '<h4 class="spop-title">错误</h4>资源添加失败！'+data.msg,
                            autoclose: 3000,style:"error"
                        });
                }
                setTimeout(200,function () {
                    window.location.reload();
                })
            },
            error:function () {
                    spop({
                        template: '<h4 class="spop-title">错误</h4>资源添加失败！',
                        autoclose: 3000,style:"error"
                    });
            }
        });
        if(layer_index_two &&layer_index_two!=undefined){
            layer.close(layer_index_two);
        }
        if(layer_index_one&&layer_index_one!=undefined){
            layer.close(layer_index_one);
        }
    return false;
  });
  var $ = layui.$, active = {
    getCheckData: function(){ //获取选中数据
      var checkStatus = table.checkStatus('idTest')
      ,data = checkStatus.data;
      layer.alert(JSON.stringify(data));
    }
    ,getCheckLength: function(){ //获取选中数目
      var checkStatus = table.checkStatus('idTest')
      ,data = checkStatus.data;
      layer.msg('选中了：'+ data.length + ' 个');
    }
    ,isAll: function(){ //验证是否全选
      var checkStatus = table.checkStatus('idTest');
      layer.msg(checkStatus.isAll ? '全选': '未全选')
    }
  };

  $('.demoTable .layui-btn').on('click', function(){
    var type = $(this).data('type');
    active[type] ? active[type].call(this) : '';
  });

    active = {
    reload: function(){
      var demoReload = $('#demoReload');

      //执行重载
      table.reload('idTest', {
         url: '/resource/list/'
        ,page: {
          curr: 1 //重新从第 1 页开始
        }
        ,where: {
          key:  demoReload.val()
        }
      });
    }
  };

  $('#searchtable .layui-btn').on('click', function(){
    var type = $(this).data('type');
    active[type] ? active[type].call(this) : '';
  });


//创建操作
$(".create-resource-btn").on("click",function () {
    layer_index_one = layer.open({
      title:"资源创建<span class='layui-badge'>选择数据源，勾选表名称进行数据创建</span>",
      type: 1,
      shade:false,
      skin: 'layui-layer-rim', //加上边框
      area: ['850px', '550px'], //宽高
      content: $("#model-box"),
    });
});

//下拉框选择事件(选择数据源)

form.on('select(selectDataSource)',function (data) {
      table.render({
        elem: '#tableselectdesc'
        ,url:'/resource/gettableslist/'+data.value
        ,cols: [[
          {#{type:'checkbox',width:'10%'}#}
          {field:'tableName', width:'40%', title: '表名称'}
          ,{field:'tableComment', width:'40%', title: '表描述'}
          ,{field:'operate', width:'20%', title: '操作',event: 'addTable'}
        ]]
        ,page: true
          ,limit:10
      });
});
    table.on('tool(addEvent)', function(obj){
        var data = obj.data;
         if(obj.event === 'addTable'){
             obj.del();
            $("#selected_before tbody").append('<tr>\n' +
                '      <td class="td_hide">'+data.tableName+'</td>\n' +
                '      <td class="td_hide">'+data.tableComment+'</td>\n' +
                '      <td class="td_hide"><button class="layui-btn layui-btn-xs" onclick="desplay_resource(this);"><i class="layui-icon layui-icon-edit"></i></button><button  onclick="delete_resource(this);" class="layui-btn layui-btn-danger layui-btn-xs"><i class="layui-icon layui-icon-delete"></i></button></td>\n' +
                '    </tr>')
                 }
    });

 //监听单元格编辑
  table.on('edit(editdesc)', function(obj){
    var value = obj.value //得到修改后的值
    ,data = obj.data //得到所在行所有键值
    ,field = obj.field; //得到字段
      var resourceid=$("#insertResourceId").val();
    var edittablename=$("#edittablename").val();
    var checkdbId=$("#checkdbId").val();
    var jsondata={
        "dbid":checkdbId,
        "tablename":edittablename,
        "columnsdesc":table.cache.display_resource_info,
        "resourceid":resourceid
    };
    $.ajax({
        url:"/resource/updatetable/",
        data:JSON.stringify(jsondata),
        dataType:"json",
        type:"UPDATE",
        success:function (data) {
            if(data.code==0){
                spop({
                    template: '<h4 class="spop-title">成功</h4>修改成功！！',
                    autoclose: 3000,style:"success"
                });
            }else {
                spop({
                    template: '<h4 class="spop-title">Error</h4>'+data.msg,
                    autoclose: 3000,style:"error"
                });
            }
        },
        error:function () {
                spop({
                    template: '<h4 class="spop-title">Error</h4>请求错误！！',
                    autoclose: 3000,style:"error"
                });
        }
    });
    //layer.msg('[ID: '+ data.id +'] ' + field + ' 字段更改为：'+ value,+edittablename,checkdbId);
  });

    var zNodes=[],zNodes1=[];
    function zTreeOnClick(event, treeId, treeNode) {
          //执行重载
          table.reload('idTest', {
         url: '/resource/list/'
            ,page: {
              curr: 1 //重新从第 1 页开始
            }
            ,where: {
              did:  treeNode.id
            }
          });
    };
    function zTreeOnClick1(event, treeId, treeNode) {
          //执行重载
          table.reload('idTest', {
         url: '/resource/list/'
            ,page: {
              curr: 1 //重新从第 1 页开始
            }
            ,where: {
              dbid:  treeNode.id
            }
          });
    };
   var zTreeObj;
   // zTree 的参数配置，深入使用请参考 API 文档（setting 配置详解）
   var setting = {

        callback: {
            onClick: zTreeOnClick
        },
        data: {
                simpleData: {
                    enable: true
                }
        },
   };
   var setting1 = {

        callback: {
            onClick: zTreeOnClick1
        },
        data: {
                simpleData: {
                    enable: true
                }
        },
   };
   //机构=库名
    {% for i in datasourcelist %}
        zNodes1.push({id:{{ i.id }},name:'{{ i.source_name }}',open:true,isParent:true})
    {% endfor %}
    zTreeObj1 = $.fn.zTree.init($("#treeDemo1"), setting1, zNodes1);
   // zTree 的数据属性，深入使用请参考 API 文档（zTreeNode 节点数据详解）
   $(document).ready(function(){
       $.getJSON("/mulu/catalog/?user_id={{ userid }}",function (data) {
                    if(data.code==0){
                        $.each(data.data,function (i,item) {
                            zNodes.push({id:item.id,pId:item.parent_id,name:item.name,open:true,isParent:true})
                            //$("#selectdir").append('<option value="'+item.id+'">'+item.name+'</option>');
                            if(item.parent_id==null){
                                 parentid=item.id;
                                $("#selectdirOne").append('<option value="'+item.id+'">'+item.name+'</option>');
                            }

                        });
                        $.each(data.data,function (i,item) {
                            if(item.parent_id==parentid){
                                $("#selectdirTwo").append('<option value="'+item.id+'">'+item.name+'</option>');
                            }

                        });
                            form.render('select');
                    }else{
                        spop({
                            template: '<h4 class="spop-title">Error</h4>目录获取错误！！',
                            autoclose: 3000,style:"error"
                        });
                    }
                  zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, zNodes);
       })

   });
   //级联分类菜单
   form.on("select(selectdirTwo)",function (data) {
       var catetwo=data.value;
         $.ajax({
                type: 'get',
                url: '/mulu/cate/'+catetwo,
                dataType:  'json',
                success: function(data){
                    $("#selectdirThree").empty();
                  $.each(data.data, function(key, val) {
                            $("#selectdirThree").append('<option value="'+val.id+'">'+val.name+'</option>');
                        });
                  form.render('select');
                }
                });
       })
   form.on("select(selectdirOne)",function (data) {
       var cateone=data.value;
         $.ajax({
                type: 'get',
                url: '/mulu/cate/'+cateone,
                dataType:  'json',
                success: function(data){
                    $("#selectdirTwo").empty();
                  $.each(data.data, function(key, val) {
                            $("#selectdirTwo").append('<option value="'+val.id+'">'+val.name+'</option>');
                        });
                  form.render('select');
                }
                });
       })

});


</script>
<SCRIPT LANGUAGE="JavaScript">

//按照状态进行切换
function filter_resource_type(em){
    layui.use(['form', 'table'], function() {
        var table = layui.table;
    active = {
    reload: function(){
      var resource_status = $(em).attr('values');
      //执行重载
      table.reload("idTest",{
         url: '/resource/list/'
        ,page: {
          curr: 1 //重新从第 1 页开始
        }
        ,where: {
          resource_status:  resource_status
        }
      });
    }
  };
    var type = "reload";
    active[type] ? active[type].call(this) : '';

    $(em).siblings().removeClass("status-this");
    $(em).addClass("status-this");
    });

    return false
}
//左侧导航进行切换
function tabsSwitch(args) {
    if(args=="tree-dir-id"){
        $("#"+args).css('display','block');
        $("#tabs-header-dir").addClass("layui-card-header-this");
        $("#tabs-header-jiegou").removeClass("layui-card-header-this");
        $("#tree-jigou-id").css("display","none").removeClass("layui-card-header-this");

    }else if(args=="tree-jigou-id"){
        $("#tabs-header-jiegou").addClass("layui-card-header-this");
        $("#tabs-header-dir").removeClass("layui-card-header-this");
        $("#"+args).css('display','block');
        $("#tree-dir-id").css("display","none")
    }


}
  </SCRIPT>
{% endblock %}